<template>
    <div ref="graphBar" class=" min-h-[calc(100vh-80px)] border border-blue-200 m-1.5 shadow-md mb-6">
        <div class=" p-1.5 bg-blue-100 text-zinc-900 border-b border-blue-300 h-10 m-1 ">
            <span class="ml-2">形状</span>
        </div>
        <div class=" p-5 flex justify-around">
            <div v-for="(item, index) in BizNode" @mousedown="drag($event, item)">
                <img v-if="item.imageUrl" :src="item.imageUrl" alt="" class="w-10 h-10">
                <div v-else class=" border border-blue-200 rounded w-10 h-10 bg-slate-100"></div>
                <span class=" text-xs">{{ item.data.title }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useEditorStore } from '@/stores/EditorStore';
import { watch } from 'vue';
import { storeToRefs } from 'pinia';
import { Dnd } from '@antv/x6-plugin-dnd';
import BizNode from '@/lib/BizNode';
import { Editor } from '@/lib/Board';

const { editor } = storeToRefs(useEditorStore())

let dnd: Dnd | undefined = undefined

const watcher = watch(editor, (newEditor: Editor) => {
    if (newEditor) {
        dnd = newEditor.dnd
        console.info("dnd load successful!");
        watcher()
    }
})

function drag(event: MouseEvent, item: any) {
    if (!dnd) {
        console.warn("dnd is loading...");
        return
    }
    let node = editor.value.createBizNode(item)

    dnd.start(node, event)

}

</script>

<style scoped>
.graph-shape {
    @apply border border-blue-200 rounded-md p-2.5 cursor-grabbing;
}
</style>